<template>
  <div class="tinymce-editor">
    <editor :disabled="disabled" v-model="myValue" :inline="inline" :init="init"></editor>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/plugins/table'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/link'

import '../libs/tinymce/plugins/image'
import '../libs/tinymce/plugins/media'
import '../libs/tinymce/plugins/formatpainter'
import 'tinymce/icons/default/icons.min.js'
import { uploadFiles } from '../apis/api'
export default {
  components: {
    Editor,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    baseUrl: {
      type: String,
      default: './static',
    },
    inline: {
      type: Boolean,
    },

    disabled: {
      type: Boolean,
      default: false,
    },
    toolbar: {
      type: String,
      default: `undo redo | fontselect | fontsizeselect| formatpainter |  bold italic underline strikethrough  | forecolor backcolor | alignleft aligncenter alignright alignjustify |
             | indent lineheight pastetext removeformat | link image media table | fullscreen preview`,
    },
    height: {
      type: [String, Number],
      default: 200,
    },
    plugins: {
      type: String,
      default: 'media image table link paste fullscreen preview ',
    },
    uploadFn: {
      type: Function,
    },
    pasteCleanup: {
      type: Boolean,
      default: false,
    },
    fontFamily: {
      type: String,
      default:
        '思源黑体=syht-Regular; 微软雅黑="Microsoft Yahei", Arial, sans-serif;仿宋_GB2312 =仿宋_GB2312;仿宋 =仿宋;方正小标宋简体=方正小标宋简体;楷体 =楷体;黑体 =黑体;',
    },
    fontSizes: {
      type: String,
      default:
        '10px 12px 14px 16px 18px 20px 22px 23px 24px 25px 26px 28px 30px 32px 34px 36px 38px 39px 40px 42px 44px 46px 48px 50px 60px 72px',
    },
    defaultFontStyle: {
      type: Object,
    },
    useInReport: {
      type: Boolean,
      default: false,
    },
    autoUploadBase64: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const uploadHandler = (file, success, failure) => {
      if (this.autoUploadBase64 || file instanceof File) {
        if (this.uploadFn) {
          this.uploadFn(file, success, failure)
        } else {
          const fmData = new FormData()
          fmData.append('files', file)
          uploadFiles(fmData)
            .then(res => {
              // 兼容之前的结构
              if (res.status === 200 || res.status === 200) {
                const files = res.data[0]
                if (files) {
                  success && success(files.sourcePath)
                }
              } else {
                failure()
              }
            })
            .catch(() => {
              failure()
            })
        }
      }
    }
    return {
      init: {
        language_url: './tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: './tinymce/skins/ui/oxide',
        content_css: './tinymce/document.css',
        height: this.height,
        plugins: this.plugins + '  formatpainter',
        toolbar: this.toolbar,
        branding: false,
        selector: 'textarea',
        menubar: 'edit view format',
        forced_root_block: '', // 去掉首行的p
        font_formats: this.fontFamily,
        fontsize_formats: this.useInReport ? this.fontSizes.replace(/px/g, 'pt') : this.fontSizes,
        // 自定义字间距
        letterspacing_val: '1px 2px 3px 4px 5px',
        paste_data_images: true,
        paste_auto_cleanup_on_paste: false,
        paste_remove_styles: false,
        paste_strip_class_attributes: false,
        file_picker_types: 'media',
        image_file_types: 'jpg,jpeg,png',
        statusbar: false,
        setup: editor => {
          // 自定义新的工具栏按钮
          editor.on('init', function () {
            let fontSize = '14px'
            let lineHeight = '22px'
            let fontFamily = '思源黑体'
            if (this.defaultFontStyle) {
              fontSize = this.defaultFontStyle.fontSize || fontSize
              lineHeight = this.defaultFontStyle.lineHeight || lineHeight
              fontFamily = this.defaultFontStyle.fontFamily || fontFamily
            } else if (this.useInReport) {
              fontSize = '16pt'
              lineHeight = '28pt'
              fontFamily = '仿宋_GB2312'
            }
            this.getBody().style.fontSize = fontSize
            this.getBody().style.lineHeight = lineHeight
            this.getBody().style.fontFamily = fontFamily
          })
        },
        images_upload_handler: (blobInfo, success, failure) => uploadHandler(blobInfo.blob(), success, failure),
        upload_handler: uploadHandler,
      },
      myValue: this.value,
      isShowFileDlg: false,
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    },
  },
  created() {
    if (this.pasteCleanup) {
      this.init.paste_auto_cleanup_on_paste = true
      this.init.paste_remove_styles = true
      this.init.paste_strip_class_attributes = true
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {},
}
</script>
<style lang="scss" scope></style>
